<template>
<div class="component-list exp-exp-list">
    <el-input class="search-inpt" clearable placeholder="输入搜索内容" v-model="filterText"></el-input>
    <el-scrollbar class="my-scrollbar">
        <el-tree
            class="filter-tree"
            :data="treeData"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree">
            <span class="tree-node-span" slot-scope="{data}" @contextmenu="$easycm($event,$root,'expList');contexMenuItem=data">
                <i class="tree-node-icon" :class="`iconfont ${data.icon}`"></i>
                <span>{{data.name}}</span>
            </span>
        </el-tree>
    </el-scrollbar>
    <div class="exp-add-exp">
        <i class="el-icon-circle-plus-outline"></i>新建实验
    </div>
    <easy-cm tag="expList" :itemHeight="32" :itemSize="12" :list="cmList" @ecmcb="handleClickMenu" :underline="false" :arrow="true"></easy-cm>
</div>
</template>

<script>
export default {
    name: 'ExpList',
    props: {
        treeData: {
            type: Array,
            required: true
        }
    },
    data () {
        return {
            contexMenuItem: {},
            filterText: '',
            cmList: [
                { text: '打开', icon: 'iconfont icon-tianjiazhushi' },
                { text: '复制', icon: 'iconfont icon-fuzhi' },
                { text: '重命名', icon: 'iconfont icon-zhongmingming' },
                { text: '删除', icon: 'iconfont icon-shanchu' }
            ]
        }
    },
    watch: {
        filterText (val) {
            this.$refs.tree.filter(val)
        }
    },
    methods: {
        init () {
            const parmas = {
                pageNum: '',
                pageSize: '',
                keyword: '',
                projectId: this.$projectId
            }
            this.$post('experiment/list', parmas).then(res => {
                console.warn('res', res)
            })
        },
        filterNode (value, data) {
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },
        handleClickMenu (indexList) {
            switch (indexList[0]) {
            case 0:
                console.log('打开')
                this.$emit('addTab', this.contexMenuItem)
                break
            case 1:
                console.log('复制')
                break
            case 2:
                console.log('重命名')
                break
            case 3:
                console.log('删除')
                break
            }
        }
    }
}
</script>

<style lang="less">
    .exp-exp-list {
        position: relative;
        .el-tree-node__content {
            position: relative;
            .tree-node-span {
                line-height: 32px;
                width: 100%;
                position: absolute;
                left: 0;
                padding-left: 15px;
                padding-right: 5px;
                box-sizing: border-box;
            }
        }
        .exp-add-exp {
            z-index: 9999;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 40px;
            width: 100%;
            background: #ffffff;
            cursor: pointer;
            color: #666666;
            display: flex;
            align-items: center;
            justify-content: center;
            i {
                color: #666666;
                font-size: 20px;
                margin-right: 5px;
            }
        }
    }
</style>
